<!--
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-button type="text" @click="dialogFormVisible = true">注册</el-button>
    <el-button type="text" @click="dialogFormVisible1 = true">登陆</el-button>
    <el-button type="text" @click="dialogFormVisible2 = true">创建活动通知</el-button>
    <el-button type="text" @click="dialogFormVisible3 = true">创建群组</el-button>
    <el-button type="text" @click="dialogFormVisible4 = true">搜索群组</el-button>

    <el-dialog title="注册" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.name" placeholder="邮箱/手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" placeholder="数字/字符/特殊符号" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="form.confirmpassword" placeholder="请再次输入" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked">同意注册协议</el-checkbox>
        </el-form-item>
        <el-form-item style="margin-left: 0">
          <el-button type="primary" @click="onSubmit">注册</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="登陆" :visible.sync="dialogFormVisible1">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.name" placeholder="邮箱/手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" placeholder="数字/字符/特殊符号" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked">记住密码</el-checkbox>
        </el-form-item>
        <el-form-item style="margin-left: 0">
          <el-button type="primary" @click="onSubmit">登陆</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="创建活动通知" :visible.sync="dialogFormVisible2">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动归属">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="小组1" value="shanghai"></el-option>
            <el-option label="小组2" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动地址">
          <el-input v-model="form.region"></el-input>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2"
                            style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="活动性质">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="活动备注">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">创建并通知</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="创建群组" :visible.sync="dialogFormVisible3">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="群组名称">
          <el-input v-model="form.name" placeholder="为您的群组起一个响亮的名字吧"></el-input>
        </el-form-item>
        <el-form-item label="群组号码">
          <el-input v-model="form.name2" placeholder="可以是数字字母/必须是唯一的"></el-input>
        </el-form-item>
        <el-form-item label="群组类别">
          <el-select v-model="form.region" placeholder="请选择创建群组的类别">
            <el-option label="家庭" value="shanghai"></el-option>
            <el-option label="同事" value="beiji3ng"></el-option>
            <el-option label="同学" value="beij3ing"></el-option>
            <el-option label="班级" value="bei2j3ing"></el-option>
            <el-option label="宿舍" value="beij2ing"></el-option>
            <el-option label="社团" value="beiji1ng"></el-option>
            <el-option label="社区" value="bei5jing"></el-option>
            <el-option label="其他" value="be4ijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="群组地址">
          <el-input v-model="form.region" placeholder="填写正确的地址，看看您附近都有哪些群组"></el-input>
        </el-form-item>
        <el-form-item label="群组设置">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="动态出现在首页" name="type"></el-checkbox>
            <el-checkbox label="可以通过群号加入" name="type"></el-checkbox>
            <el-checkbox label="加群不须经过群主同意" name="type"></el-checkbox>
            &lt;!&ndash;<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>&ndash;&gt;
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="群组介绍">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">创建群组</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="搜索群组" :visible.sync="dialogFormVisible4">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="群组">
          <el-input v-model="form.name" placeholder="搜索的群组名称/群号"></el-input>
        </el-form-item>
        <el-form-item label="验证信息">
          <el-input v-model="form.password" placeholder="验证信息将展示给群主" type="password"></el-input>
        </el-form-item>

        <el-form-item style="margin-left: 0">
          <el-button type="primary" @click="onSubmit">加入</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
  import ElCheckbox from '../../node_modules/element-ui/packages/checkbox/src/checkbox.vue'

  export default {
    components: {ElCheckbox},
    name: 'hello',
    data () {
      return {
        checked: true,
        msg: 'Welcome to Your Vue.js App',
        gridData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        dialogFormVisible2: false,
        dialogFormVisible1: false,
        dialogFormVisible3: false,
        dialogFormVisible4: false,

        formLabelWidth: '120px',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit () {
        console.log('submit!')
      }
    }
  }
</script>

&lt;!&ndash; Add "scoped" attribute to limit CSS to this component only &ndash;&gt;
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
-->
